<template>
  <div>
    <p>姓名:{{ person.name }}</p>
    <p>年龄:{{ person.age }}</p>
    <button @click="changeAge">修改年龄</button>
    <hr />
    <p>姓名2:{{ person2.name }}</p>
    <p>年龄2:{{ person2.age }}</p>
    <button @click="changeAge2">修改年龄2</button>
    <hr />
    <p>汽车价格：{{ car2.price }}</p>
    <button @click="changePrice">修改价格</button>
  </div>
</template>

<script setup lang="ts" name="">
import { reactive, toRaw, markRaw } from "vue";
let person = reactive({
  name: "lyt",
  age: 18,
});
function changeAge() {
  person.age += 1;
}
function changeAge2() {
  person2.age += 1;
}
// toRaw 获取原始数据
let person2 = toRaw(person);
console.log("响应式数据reactive", person);
console.log("原始数据toRaw", person2);
//markRaw 禁止响应式
// let car = { brand: "BMW", price: 1000 };
let car = markRaw({ brand: "BMW", price: 1000 });
let car2 = reactive(car);
function changePrice() {
  car2.price += 1;
  console.log(car);
  console.log(car2);
}
</script>

<style scoped></style>
